<ion-header no-border>
  <!-- <ion-navbar transparent>
  </ion-navbar> -->
</ion-header>
<ion-content>
  <ion-slides pager="false" autoplay="2000" loop="true" speed="1500" effect="fade">
    <ion-slide class="slide-background swiper-no-swiping" *ngFor="let background of backgrounds" [ngStyle]="{'background-image': 'url(' + background +')'}">
    </ion-slide>
  </ion-slides>
  <div class="login-container">
    <h1 text-center class="logo">
      <strong >
          APPETITE
      </strong>
    </h1>
    <form (submit)="doLogin()" [formGroup]="loginForm" novalidate>
      <ion-item>
        <ion-input type="email" placeholder="User ID" formControlName="email" autocapitalize="off" clearInput="true"></ion-input>
      </ion-item>
      <p [hidden]="loginForm.controls.email.valid || !submitted">
          用户名(邮箱)输入有误
      </p>
      <ion-item>
        <ion-input type="password" placeholder="PASSWORD" formControlName="password"></ion-input>
      </ion-item>
      <p [hidden]="loginForm.controls.password.valid || !submitted">
          密码必须6位或以上
      </p>
      <button ion-button margin color="danger" width="200">Login</button>
      <p (click)="openResetPassword()">
        <span class="footer-text">Forget password?</span>
      </p>
    </form>
  </div>
</ion-content>
